<template>
  <div class="challenge-questions-box">
    <my-top-nav :title="'挑战答题'" @clickBack="clickBack"></my-top-nav>
    <div class="question-cart-box">
      <div class="querstion-cart-header" v-if="answerFinsh === false">
        <div class="querstion-cart-header-num">第{{querstionNum+1}}题</div>
        <div class="querstion-time">
          <transition name="fade">
            <span v-if="show">{{countDown}}</span>
          </transition>
        </div>
        <transition name="fade">
          <p class="querstion-title" v-if="showQuerstionTitle">{{querstionList[querstionNum].title}}属于什么垃圾</p>
        </transition>
        <p v-if="showAnswerType" :class="answerType === '回答正确' ? 'success-desc' : 'error-desc'">{{answerType}}</p>
      </div>
      <div class="querstion-cart-body" v-if="answerFinsh === false">
        <transition name="fade">
          <div v-if="showQuerstionTitle" class="querstion-cart-body-content">
            <div class="querstion-cart-body-btn"
              :class="isAnswerClass && querstionStr==='可回收垃圾' ? 'querstion-cart-body-answered-btn' : ''"
              @click="userAnswer('可回收垃圾')">可回收垃圾</div>
            <div class="querstion-cart-body-btn"
              :class="isAnswerClass && querstionStr==='其他垃圾' ? 'querstion-cart-body-answered-btn' : ''"
              @click="userAnswer('其他垃圾')">其他垃圾</div>
            <div class="querstion-cart-body-btn"
              :class="isAnswerClass && querstionStr==='有害垃圾' ? 'querstion-cart-body-answered-btn' : ''"
              @click="userAnswer('有害垃圾')">有害垃圾</div>
            <div class="querstion-cart-body-btn"
              :class="isAnswerClass && querstionStr==='易腐垃圾' ? 'querstion-cart-body-answered-btn' : ''"
              @click="userAnswer('易腐垃圾')">易腐垃圾</div>
          </div>
        </transition>
      </div>
      <transition name="fade">
        <div v-if="answerFinsh === true" class="answerFinsh-box">
          <div
            style="margin-top:30px;width:100%;display: flex;justify-content: center;align-items: center;flex-direction: column">
            <img style="margin-top:70px;width:100px;height:100px;" src="../../assets/search/答题完成.png" alt="">
            <span style="margin-top:5px;font-size:12px;font-weight: 400;color:rgb(190,151,106);">本次答题得分：{{grade}}</span>
          </div>
          <div class="answerFinsh-desc">
            <div class="answerFinsh-desc-content">
              <div class="answerFinsh-correct">正确数：{{correctNum}}</div>
              <div class="answerFinsh-grade">错误数：{{errorNum}}</div>
            </div>
          </div>
          <div class="answerFinsh-detail" @click="goQuestionDetail">答题详情></div>
          <div class="answerFinsh-again">
            <div class="answerFinsh-btn" @click="goHome">
              返回首页
            </div>
            <span style="margin-top:5px;font-size:16px;font-weight: 400;color:rgb(190,151,106);">记得下次再来哦</span>
          </div>
        </div>
      </transition>
    </div>
  </div>
</template>

<script>
import myTopNav from "../../components/myTopNav";
export default {
  data() {
    return {
      showAnswerType: false, // 控制是否显示答题正确情况
      answerType: "", // 回答正确或错误文案
      grade: 0, // 答题得分
      errorNum: 0, // 错误数
      correctNum: 0, // 正确数
      querstionTitleTop: "", // 题目切换停止
      answerFinsh: false, // 判断答题是否完成
      showQuerstionTitle: true, // 题目动画控制
      show: true, // 倒计时动画控制
      countDownStop: "", // 倒计时停止
      countDown: 10, // 倒计时
      querstionStr: "", // 选择
      isAnswerClass: false,
      querstionNum: 0, // 题号
      querstionList: [
        { title: "纸张", classification: "可回收垃圾" },
        { title: "包装箱", classification: "可回收垃圾" },
        { title: "陶瓷", classification: "其他垃圾" },
        { title: "中药药渣", classification: "易腐垃圾" },
        { title: "水银温度计", classification: "有害垃圾" }
      ], // 题目
      answerList: [] // 用户答案
    };
  },
  components: {
    myTopNav
  },
  computed: {
    getHeight() {
      return (
        document.documentElement.scrollHeight || document.body.scrollHeight
      );
    }
  },
  methods: {
    /**
     * @author: 张志名 [1372342958@qq.com]
     * @description: 跳转答题详情
     * @param {type} {Object}
     * @return: {void}
     * @Date: 2019-12-18 19:39:00
     */
    goQuestionDetail() {
      this.$router.push({
        name: "querstionDetail",
        query: {
          answerList: this.answerList,
          querstionList: this.querstionList
        }
      });
    },
    /**
     * @author: 张志名 [1372342958@qq.com]
     * @description: 判断用户答案
     * @param {Array} list 用户答案数组
     * @return: {void}
     * @Date: 2019-12-17 16:50:42
     */
    valiteUserAnswer(list) {
      for (var i = 0, j = this.querstionList.length; i < j; i++) {
        if (list[i] === this.querstionList[i].classification) {
          this.correctNum++;
          this.grade += 20;
        } else {
          this.errorNum++;
        }
      }
    },
    /**
     * @author: 张志名 [1372342958@qq.com]
     * @description:
     * @param {String} data 用户某一题选择的答案
     * @return: {void}
     * @Date: 2019-12-18 09:34:06
     */
    valiteUserAnswerItem(data) {
      this.showAnswerType = true;
      if (data === this.querstionList[this.querstionNum].classification) {
        this.answerType = "回答正确";
      } else if (data === "") {
        this.answerType = "未作答";
      } else {
        this.answerType = "回答错误";
      }
    },
    /**
     * @author: 张志名 [1372342958@qq.com]
     * @description: 返回首页
     * @param {type} {Object}
     * @return: {void}
     * @Date: 2019-12-17 16:49:54
     */
    goHome() {
      this.$router.push({
        path: "/"
      });
    },
    /**
     * @author: 张志名 [1372342958@qq.com]
     * @description: 用户选择答案
     * @param {String} data 选择的答案
     * @return: {void}
     * @Date: 2019-12-17 10:56:53
     */
    userAnswer(data) {
      this.valiteUserAnswerItem(data);
      const ln = this.querstionList.length;
      if (this.querstionNum === ln - 1) {
        this.isAnswerClass = true;
        this.answerList.push(data);
        this.querstionStr = data;
        this.valiteUserAnswer(this.answerList);
        this.stopQuerstion();
        return false;
      } else {
        this.answerList.push(data);
        this.isAnswerClass = true;
        this.querstionStr = data;
        clearTimeout(this.countDownStop);
        this.changeQuerstion();
      }
    },
    /**
     * @author: 张志名 [1372342958@qq.com]
     * @description: 停止答题
     * @return: {void}
     * @Date: 2019-12-18 09:05:02
     */
    stopQuerstion() {
      setTimeout(() => {
        this.showQuerstionTitle = false;
        this.showAnswerType = false;
        this.answerFinsh = true;
        this.show = false;
        clearTimeout(this.countDownStop);
      }, 1000);
    },
    /**
     * @author: 张志名 [1372342958@qq.com]
     * @description: 题目切换函数
     * @return: {void}
     * @Date: 2019-12-18 08:53:00
     */
    changeQuerstion() {
      const ln = this.querstionList.length;
      if (this.querstionNum === ln - 1) {
        return;
      }
      // 切换题目延迟显示
      this.querstionTitleTop = setTimeout(() => {
        if (this.querstionNum < ln) {
          this.querstionNum++;
          this.isAnswerClass = false;
          this.querstionStr = "";
          this.countDown = 10;
          this.getDownTime();
          this.showQuerstionTitle = false;
          this.showAnswerType = false;
          this.show = false;
        }
      }, 1000);
      // 动画显示
      this.querstionTitleTop = setTimeout(() => {
        this.showQuerstionTitle = true;
        this.show = true;
      }, 1000);
    },
    /**
     * @author: 张志名 [1372342958@qq.com]
     * @description: 返回上一级
     * @param {type} {Object}
     * @return: {void}
     * @Date: 2019-12-17 16:50:04
     */
    clickBack() {
      this.$router.back();
    },
    /**
     * @author: 张志名 [1372342958@qq.com]
     * @description: 倒计时
     * @return: {void}
     * @Date: 2019-12-18 08:32:55
     */
    getDownTime() {
      // 进入页面和每次切换题目时执行
      this.show = true;
      this.countDownStop = setInterval(() => {
        this.countDown--;
        this.show = false;
        if (this.countDown <= 0) {
          clearInterval(this.countDownStop);
          this.userAnswer("");
        }
      }, 1000);
      setInterval(() => {
        this.show = true;
      }, 1000);
    }
  },
  mounted() {
    this.getDownTime();
  }
};
</script>

<style lang="scss" scoped>
.success-desc {
  font-family: "微软雅黑";
  font-size: 16px;
  font-weight: 700;
  color: #67c23a;
}
.error-desc {
  font-size: 16px;
  font-weight: 700;
  color: #dd4b39;
}
.fade-enter-active,
.fade-leave-active {
  transition: opacity 1s;
}
.fade-enter,
.fade-leave-to {
  opacity: 0;
}
.challenge-questions-box {
  height: calc(100vh);
  background-image: url("../../assets/search/背景3.jpg");
  background-repeat: no-repeat;
  background-size:cover;
  .question-cart-box {
    margin: 0px 8%;
    margin-top: 50px;
    margin-bottom: 0;
    border-radius: 16px;
    box-shadow: 0px 0px 10px #000;
    .querstion-cart-header {
      background-color: #ffffff;
      min-height: 120px;
      border-radius: 16px 16px 0 0;
      display: flex;
      justify-content: center;
      align-items: center;
      position: relative;
      flex-direction: column;
      border-bottom: 1px dotted rgb(254, 163, 50);
      .querstion-cart-header-num {
        position: absolute;
        top: 15px;
        left: 15px;
      }
      .querstion-title {
        color: #1989fa;
        font-weight: 700;
        font-size: 18px;
        margin-top: 15px;
      }
      .querstion-time {
        position: absolute;
        width: 60px;
        height: 60px;
        border-radius: 50% 50%;
        top: -30px;
        left: 42%;
        background-color: #ffffff;
        z-index: 5;
        box-shadow: 0px 0px 10px #000;
        text-align: center;
        line-height: 60px;
        color: #333;
        font-weight: 700;
        font-size: 18px;
      }
    }
    .querstion-cart-body {
      height: 300px;
      background-color: #ffffff;
      border-radius: 0 0 16px 16px;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      .querstion-cart-body-btn {
        background-color: rgb(229, 229, 229);
        color: rgb(123, 123, 123);
        width: 80%;
        height: 45px;
        font-size: 18px;
        font-weight: 700;
        text-align: center;
        line-height: 45px;
        border-radius: 50px;
        margin: 5px;
      }
      .querstion-cart-body-answered-btn {
        cursor: pointer;
        background-color: rgb(22, 144, 8);
        color: #ffffff;
      }
    }
    .querstion-cart-body-content {
      width: 100%;
      height: 300px;
      background-color: #ffffff;
      border-radius: 16px 16px 16px 16px;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
    }
    .answerFinsh-box {
      width: 100%;
      height: 400px;
      background-color: rgb(84, 101, 239);
      border-radius: 16px;
      color: #333;
      font-weight: 700;
      font-size: 18px;
      // padding-bottom: 50px;
      .answerFinsh-title {
        width: 100%;
        box-sizing: border-box;
        padding: 10px 15px;
      }
      .answerFinsh-desc {
        width: 100%;
        display: flex;
        justify-content: space-around;
        align-items: center;
        height: 60px;
        .answerFinsh-desc-content {
          width: 50%;
          background-color: rgb(84, 69, 188);
          border-radius: 50px;
          display: flex;
          justify-content: space-around;
          align-items: center;
          padding: 0 10px;
          height: 40px;
          font-weight: 400;
          font-size: 14px;
          color: #ffffff;
        }
      }
      .answerFinsh-detail {
        color: #ffffff;
        font-size: 16px;
        font-weight: 400;
        text-align: center;
      }
      .answerFinsh-again {
        width: 100%;
        text-align: center;
        display: flex;
        justify-content: center;
        align-items: center;
        flex-direction: column;
        .answerFinsh-btn {
          width: 50%;
          margin-top: 30px;
          font-weight: 400;
          background-color: rgb(254, 163, 50);
          color: rgb(253, 228, 194);
          border: 1px solid rgb(254, 163, 50);
          border-radius: 50px;
          height: 40px;
          line-height: 40px;
          box-shadow: 0px 0px 10px rgb(254, 163, 50);
        }
      }
    }
  }
}
</style>